<!doctype html>
<html lang="zh"><head>
<title>node-tsconfig.json配置相关 - 糖羽仙</title>
<meta charset="UTF-8">
<meta name="keywords" content="blog ACG JavaScript VUE IT">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">

<link rel="shortcut icon" href="/images/head/head.jpg" type="image/jpeg" />
<meta name="description" content="tsconfig.json配置详细说明…">
<meta property="og:type" content="article">
<meta property="og:title" content="node-tsconfig.json配置相关">
<meta property="og:url" content="https://www.tangyuxian.com/2021/06/09/%E5%89%8D%E7%AB%AF/node/node-tsconfig-json%E9%85%8D%E7%BD%AE%E7%9B%B8%E5%85%B3/index.html">
<meta property="og:site_name" content="糖羽仙">
<meta property="og:description" content="tsconfig.json配置详细说明…">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://segmentfault.com/img/remote/1460000022809334">
<meta property="og:image" content="https://segmentfault.com/img/remote/1460000022809332">
<meta property="og:image" content="https://segmentfault.com/img/remote/1460000022809333">
<meta property="article:published_time" content="2021-06-09T03:27:03.000Z">
<meta property="article:modified_time" content="2022-08-20T10:06:06.032Z">
<meta property="article:author" content="tangyuxian">
<meta property="article:tag" content="转载">
<meta property="article:tag" content="node">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://segmentfault.com/img/remote/1460000022809334">

<link rel="stylesheet" href="/lib/fancybox/fancybox.css">
<link rel="stylesheet" href="/lib/mdui_043tiny/mdui.css">


<link rel="stylesheet" href="/lib/iconfont/iconfont.css?v=1763992124121">

    <link rel="stylesheet" href="//at.alicdn.com/t/font_2421060_8z08qcz5sq3.css">

<link rel="stylesheet" href="/css/style.css?v=1763992124121">




    
        <link rel="stylesheet" href="/custom.css?v=1763992124121">
    
        <link rel="stylesheet" href="/themes/umaru/index.css?v=1763992124121">
    
        <link rel="stylesheet" href="/themes/asuka/index.css?v=1763992124121">
    



<script src="/lib/mdui_043tiny/mdui.js" async></script>
<script src="/lib/fancybox/fancybox.umd.js" async></script>
<script src="/lib/lax.min.js" async></script>


<script async src="/js/app.js?v=1763992124121"></script>

 

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-1Z7TFL96ZH"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-1Z7TFL96ZH');
</script>


<link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/atom-one-dark.min.css">
<!-- hexo injector head_end start -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hexo-shiki-plugin@latest/lib/codeblock.css">
<style>:root{--hl-color:#e1e4e8;--hl-bg:#24292e;--hltools-bg:#1f2428;--hltools-color:#c5c5c5;--hlnumber-bg:#24292e;--hlnumber-color:#444d56;--hlscrollbar-bg:#32383e;--hlexpand-bg:linear-gradient(180deg,rgba(36,41,46,0.1),rgba(36,41,46,0.9))}</style><!-- hexo injector head_end end --><meta name="generator" content="Hexo 7.3.0"></head><body class="nexmoe mdui-drawer-body-left"><div id="nexmoe-background"><div class="nexmoe-bg" style="background-image: url(/images/background/xiaomai.jpg)"></div><div class="nexmoe-character"></div><div class="mdui-appbar mdui-shadow-0"><div class="mdui-toolbar"><a class="mdui-btn mdui-btn-icon mdui-ripple" mdui-drawer="{target: &#039;#drawer&#039;, swipe: true}" title="menu"><i class="mdui-icon nexmoefont icon-menu"></i></a><div class="mdui-toolbar-spacer"></div><a class="mdui-btn mdui-btn-icon" href="/" title="tangyuxian"><img src="/images/head/head.jpg" alt="tangyuxian"></a></div></div></div><div id="nexmoe-header"><div class="nexmoe-drawer mdui-drawer" id="drawer">
    <div class="nexmoe-avatar mdui-ripple">
        <a href="/" title="tangyuxian">
            <img src="/images/head/head.jpg" alt="tangyuxian" alt="tangyuxian">
        </a>
    </div>
    <div class="nexmoe-count">
        <div class="nexmoe-count-item"><span>文章</span>84 <div class="item-radius"></div><div class="item-radius item-right"></div> </div>
        <div class="nexmoe-count-item"><span>标签</span>38<div class="item-radius"></div><div class="item-radius item-right"></div></div>
        <div class="nexmoe-count-item"><span>分类</span>5<div class="item-radius"></div><div class="item-radius item-right"></div></div>
    </div>
    <div class="nexmoe-list mdui-list" mdui-collapse="{accordion: true}">
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple false" href="/" title="回到首页">
            <i class="mdui-list-item-icon nexmoefont icon-meishi"></i>
            <div class="mdui-list-item-content">
                回到首页
            </div>
        </a>
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple false" href="/archives.html" title="文章归档">
            <i class="mdui-list-item-icon nexmoefont icon-hanbao1"></i>
            <div class="mdui-list-item-content">
                文章归档
            </div>
        </a>
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple false" href="/about.html" title="关于糖糖">
            <i class="mdui-list-item-icon nexmoefont icon-jiubei1"></i>
            <div class="mdui-list-item-content">
                关于糖糖
            </div>
        </a>
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple false" href="/friend.html" title="我的朋友">
            <i class="mdui-list-item-icon nexmoefont icon-cola"></i>
            <div class="mdui-list-item-content">
                我的朋友
            </div>
        </a>
        
    </div>
    
    
        
        <div class="nexmoe-widget-wrap">
    <div class="nexmoe-widget nexmoe-search">
         
            <form id="search_form" action_e="https://cn.bing.com/search?q=site:tangyuxian.com" onsubmit="return search();">
                <label><input id="search_value" name="q" type="search" placeholder="搜索"></label>
            </form>
         
    </div>
</div>




    
        
        <div class="nexmoe-widget-wrap">
	<div class="nexmoe-widget nexmoe-social">
		<a
			class="mdui-ripple"
			href="http://wpa.qq.com/msgrd?v=3&uin=2120252100&site=qq&menu=yes"
			target="_blank"
			mdui-tooltip="{content: 'QQ'}"
			style="
				color: rgb(64, 196, 255);
				background-color: rgba(64, 196, 255, .1);
			"
		>
			<i
				class="nexmoefont icon-QQ"
			></i> </a
		><a
			class="mdui-ripple"
			href="mailto:tangyuxian@vip.qq.com"
			target="_blank"
			mdui-tooltip="{content: 'mail'}"
			style="
				color: rgb(249,8,8);
				background-color: rgba(249,8,8,.1);
			"
		>
			<i
				class="nexmoefont icon-mail-fill"
			></i> </a
		><a
			class="mdui-ripple"
			href="https://blog.csdn.net/qq_40621378?type=blog"
			target="_blank"
			mdui-tooltip="{content: 'CSDN'}"
			style="
				color: rgb(199,29,35);
				background-color: rgba(199,29,35,.1);
			"
		>
			<i
				class="nexmoefont icon-csdn"
			></i> </a
		><a
			class="mdui-ripple"
			href="https://www.cnblogs.com/lovetangyuxian/"
			target="_blank"
			mdui-tooltip="{content: '博客园'}"
			style="
				color: rgb(66, 214, 29);
				background-color: rgba(66, 214, 29, .1);
			"
		>
			<i
				class="nexmoefont icon-bokeyuan"
			></i> </a
		><a
			class="mdui-ripple"
			href="https://github.com/tangyuxian/"
			target="_blank"
			mdui-tooltip="{content: 'GitHub'}"
			style="
				color: rgb(25, 23, 23);
				background-color: rgba(25, 23, 23, .15);
			"
		>
			<i
				class="nexmoefont icon-github"
			></i> </a
		><a
			class="mdui-ripple"
			href="https://gitee.com/tangyuxian"
			target="_blank"
			mdui-tooltip="{content: 'gitee'}"
			style="
				color: rgb(255, 255, 255);
				background-color: rgb(199,29,35);
			"
		>
			<i
				class="nexmoefont icon-mayun"
			></i> </a
		>
	</div>
</div>

    
        
        
  <div class="nexmoe-widget-wrap">
    <h3 class="nexmoe-widget-title">文章分类</h3>
    <div class="nexmoe-widget">

      <ul class="category-list">

        


        

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/其它/">其它</a>
          <span class="category-list-count">2</span>
        </li>

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/前端/">前端</a>
          <span class="category-list-count">62</span>
        </li>

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/后端/">后端</a>
          <span class="category-list-count">8</span>
        </li>

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/开发工具/">开发工具</a>
          <span class="category-list-count">11</span>
        </li>

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/服务器端/">服务器端</a>
          <span class="category-list-count">1</span>
        </li>

        
      </ul>

    </div>
  </div>


    
        
        
  <div class="nexmoe-widget-wrap">
    <div id="randomtagcloud" class="nexmoe-widget tagcloud nexmoe-rainbow">
      <a href="/tags/JavaScript/" style="font-size: 15.56px;">JavaScript</a> <a href="/tags/Jetbrains/" style="font-size: 10px;">Jetbrains</a> <a href="/tags/TypeScript/" style="font-size: 10px;">TypeScript</a> <a href="/tags/UI%E5%BA%93/" style="font-size: 13.33px;">UI库</a> <a href="/tags/centos/" style="font-size: 10px;">centos</a> <a href="/tags/css/" style="font-size: 11.11px;">css</a> <a href="/tags/docker/" style="font-size: 10px;">docker</a> <a href="/tags/echarts/" style="font-size: 10px;">echarts</a> <a href="/tags/elementPlus/" style="font-size: 13.33px;">elementPlus</a> <a href="/tags/es6/" style="font-size: 14.44px;">es6</a> <a href="/tags/git/" style="font-size: 13.33px;">git</a> <a href="/tags/github/" style="font-size: 10px;">github</a> <a href="/tags/html/" style="font-size: 10px;">html</a> <a href="/tags/http/" style="font-size: 13.33px;">http</a> <a href="/tags/java/" style="font-size: 11.11px;">java</a> <a href="/tags/markerdown/" style="font-size: 11.11px;">markerdown</a> <a href="/tags/nginx/" style="font-size: 10px;">nginx</a> <a href="/tags/node/" style="font-size: 13.33px;">node</a> <a href="/tags/vite/" style="font-size: 10px;">vite</a> <a href="/tags/vue/" style="font-size: 18.89px;">vue</a> <a href="/tags/webpack/" style="font-size: 10px;">webpack</a> <a href="/tags/xuex/" style="font-size: 10px;">xuex</a> <a href="/tags/%E4%BA%8B%E4%BB%B6%E6%B5%81/" style="font-size: 10px;">事件流</a> <a href="/tags/%E4%BA%92%E8%81%94%E7%BD%91/" style="font-size: 10px;">互联网</a> <a href="/tags/%E5%8A%A0%E5%AF%86/" style="font-size: 12.22px;">加密</a> <a href="/tags/%E5%8E%9F%E5%88%9B/" style="font-size: 20px;">原创</a> <a href="/tags/%E5%B7%A5%E5%85%B7/" style="font-size: 13.33px;">工具</a> <a href="/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/" style="font-size: 12.22px;">微信小程序</a> <a href="/tags/%E6%80%BB%E7%BB%93/" style="font-size: 13.33px;">总结</a> <a href="/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/" style="font-size: 10px;">数据结构</a> <a href="/tags/%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 10px;">服务器</a> <a href="/tags/%E6%B5%8F%E8%A7%88%E5%99%A8/" style="font-size: 17.78px;">浏览器</a> <a href="/tags/%E7%AE%97%E6%B3%95/" style="font-size: 14.44px;">算法</a> <a href="/tags/%E7%BC%96%E8%A7%A3%E7%A0%81/" style="font-size: 10px;">编解码</a> <a href="/tags/%E7%BE%8E%E5%8C%96/" style="font-size: 12.22px;">美化</a> <a href="/tags/%E8%A7%86%E9%A2%91/" style="font-size: 11.11px;">视频</a> <a href="/tags/%E8%AE%B0%E5%BD%95/" style="font-size: 11.11px;">记录</a> <a href="/tags/%E8%BD%AC%E8%BD%BD/" style="font-size: 16.67px;">转载</a>
    </div>
    
      <script>
        var maxTagcloud = parseInt(17);
        var tags_length = parseInt(38);
        var tags_arr = [];
        for(var i = 0; i < tags_length; i++){
          tags_arr.push(i);
        }
        tags_arr.sort(function (l, r) {
          return Math.random() > 0.5 ? -1 : 1;
        });
        tags_arr = tags_arr.slice(0, maxTagcloud < tags_length ? tags_length - maxTagcloud : 0);
        for(var tag_i = 0; tag_i < tags_arr.length; tag_i++){
          document.getElementById("randomtagcloud").children[tags_arr[tag_i]].style.display = 'none';
        }
      </script>
    
  </div>

    
        
        
        
  <div class="nexmoe-widget-wrap">
    <h3 class="nexmoe-widget-title">文章归档</h3>
    <div class="nexmoe-widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2025/">2025</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2023/">2023</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/">2022</a><span class="archive-list-count">23</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/">2021</a><span class="archive-list-count">54</span></li></ul>
    </div>
  </div>



    
        
        
  <div class="nexmoe-widget-wrap">
    <h3 class="nexmoe-widget-title">最新文章</h3>
    <div class="nexmoe-widget">
      <ul>
        
          <li>
            <a href="/2025/11/12/%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7/%E7%BE%8E%E5%8C%96/%E7%BE%8E%E5%8C%96-%E7%BD%91%E9%A1%B5%E4%B8%BB%E9%A2%98%E5%88%87%E6%8D%A2%E7%9A%84%E6%B8%90%E5%8F%98%E5%8A%A8%E7%94%BB/">美化-网页主题切换的渐变动画</a>
          </li>
        
          <li>
            <a href="/2025/09/29/%E5%89%8D%E7%AB%AF/css/css-%E8%A1%A8%E6%A0%BCtd%E4%B8%8B%E9%AB%98%E5%BA%A6%E4%B8%A2%E5%A4%B1%E8%A7%A3%E5%86%B3%E5%8A%9E%E6%B3%95/">css-表格td下高度丢失解决办法</a>
          </li>
        
          <li>
            <a href="/2025/09/23/%E5%89%8D%E7%AB%AF/vue/vue-%E5%B0%81%E8%A3%85%E5%87%BD%E6%95%B0%E5%BC%8F%E8%A7%A6%E5%8F%91%E5%8F%B3%E9%94%AE%E8%8F%9C%E5%8D%95/">vue-封装函数式触发右键菜单组件</a>
          </li>
        
          <li>
            <a href="/2025/06/04/%E5%89%8D%E7%AB%AF/UI%E5%BA%93/UI%E5%BA%93-ElTooltip%E5%8F%AA%E5%9C%A8%E6%96%87%E5%AD%97%E8%B6%85%E5%87%BA%E8%8C%83%E5%9B%B4%E6%97%B6%E6%98%BE%E7%A4%BA%E7%9A%84%E8%A7%86%E7%BA%BF%E6%96%B9%E5%BC%8F/">UI库-ElTooltip只在文字超出范围时显示的视线方式</a>
          </li>
        
          <li>
            <a href="/2025/05/29/%E5%89%8D%E7%AB%AF/UI%E5%BA%93/UI%E5%BA%93-%E5%B0%81%E8%A3%85PageTable%E6%80%BB%E8%A7%88/">UI库-封装PageTable总览</a>
          </li>
        
      </ul>
    </div>
  </div>

    
        
        <div class="nexmoe-widget-wrap">
    <div class="nexmoe-widget nexmoe-link">
		<ul>
        
            <li>
                <a href="https://tangyuxian.com/" target="_blank" >
                    <img src="https://cdn.tangyuxian.com/PicGoImages/202304272004917.jpg" alt="糖糖第一可爱"></img>
                    <p style="color: var(--color-primary)">糖糖第一可爱</p>
                </a>
            </li>
        
		</ul>
    </div>
</div>
<style>
.nexmoe-widget-wrap .nexmoe-link ul li a {
    text-align : center;
}
.nexmoe-widget-wrap .nexmoe-link ul li a img {
    max-width : 100%;
}
.nexmoe-widget-wrap .nexmoe-link ul li a p {
    margin: 10px 0;
}
</style>

    
   
    <div class="nexmoe-copyright">
        &copy; 2025 tangyuxian
        Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
        & <a href="https://github.com/tangyuxian/hexo-theme-tangyuxian" target="_blank">Tangyuxian</a>
        <br><a target="_blank" href="https://beian.miit.gov.cn/">辽ICP备2021002341号</a>
<div style="font-size: 12px">
   <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
   本站总访问量  <a id="busuanzi_value_site_pv"></a> 次<br />
   本站访客数<a id="busuanzi_value_site_uv"></a>人次
</div>

    </div>
</div><!-- .nexmoe-drawer --></div><div id="nexmoe-content"><div class="nexmoe-primary"><div class="nexmoe-post">
  <article>
    
        <div class="nexmoe-post-cover">
            <img src="/images/post/nodejs.jpg" alt="node-tsconfig.json配置相关" loading="lazy">
            <h1>node-tsconfig.json配置相关</h1>
        </div>
        
    
    <div class="nexmoe-post-meta">
    <div class="nexmoe-rainbow">
        <a class="nexmoefont icon-calendar-fill">2021年06月09日</a>
        
            <a class="nexmoefont icon-appstore-fill -link" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>
        
        
    </div>
    
    
    
    
    
</div>

    <p>tsconfig.json配置详细说明…</p>
<span id="more"></span>

<h3 id="1-初始化-learnTsconfig-项目"><a href="#1-初始化-learnTsconfig-项目" class="headerlink" title="1. 初始化 learnTsconfig 项目"></a>1. 初始化 learnTsconfig 项目</h3><p>执行下面命令：</p>
<figure class="shiki text"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #e1e4e8">$ mkdir learnTsconfig</span></span>
<span class="line"><span style="color: #e1e4e8">$ cd .\learnTsconfig\</span></span>
<span class="line"><span style="color: #e1e4e8">$ mkdir src</span></span>
<span class="line"><span style="color: #e1e4e8">$ new-item index.ts</span></span></code></pre></div></div></figure>

<p>并且我们为 index.ts 文件写一些简单代码：</p>
<figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #6A737D">// 返回当前版本号</span></span>
<span class="line"><span style="color: #F97583">function</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">getVersion</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">version</span><span style="color: #F97583">:</span><span style="color: #79B8FF">string</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;1.0.0&quot;</span><span style="color: #E1E4E8">)</span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">string</span><span style="color: #E1E4E8">{</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">return</span><span style="color: #E1E4E8"> version;</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">console.</span><span style="color: #B392F0">log</span><span style="color: #E1E4E8">(</span><span style="color: #B392F0">getVersion</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;1.0.1&quot;</span><span style="color: #E1E4E8">))</span></span></code></pre></div></div></figure>

<p>我们将获得这么一个目录结构：</p>
<figure class="shiki text"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #e1e4e8">└─src/</span></span>
<span class="line"><span style="color: #e1e4e8">   └─index.ts</span></span></code></pre></div></div></figure>



<h3 id="2-初始化-tsconfig-json-文件"><a href="#2-初始化-tsconfig-json-文件" class="headerlink" title="2. 初始化 tsconfig.json 文件"></a>2. 初始化 tsconfig.json 文件</h3><p>在 learnTsconfig 根目录执行：</p>
<figure class="shiki text"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #e1e4e8">$ tsc --init</span></span></code></pre></div></div></figure>



<h3 id="3-修改-tsconfig-json-文件"><a href="#3-修改-tsconfig-json-文件" class="headerlink" title="3. 修改 tsconfig.json 文件"></a>3. 修改 tsconfig.json 文件</h3><p>我们设置几个常见配置项：</p>
<figure class="shiki json"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #E1E4E8">{</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #79B8FF">&quot;compilerOptions&quot;</span><span style="color: #E1E4E8">: {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;target&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">&quot;ES5&quot;</span><span style="color: #E1E4E8">,             </span><span style="color: #6A737D">// 目标语言的版本</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;module&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">&quot;commonjs&quot;</span><span style="color: #E1E4E8">,        </span><span style="color: #6A737D">// 指定生成代码的模板标准</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;noImplicitAny&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">,       </span><span style="color: #6A737D">// 不允许隐式的 any 类型</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;removeComments&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">,      </span><span style="color: #6A737D">// 删除注释 </span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;preserveConstEnums&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">,  </span><span style="color: #6A737D">// 保留 const 和 enum 声明</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;sourceMap&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">            </span><span style="color: #6A737D">// 生成目标文件的sourceMap文件</span></span>
<span class="line"><span style="color: #E1E4E8">  },</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #79B8FF">&quot;files&quot;</span><span style="color: #E1E4E8">: [   </span><span style="color: #6A737D">// 指定待编译文件</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #9ECBFF">&quot;./src/index.ts&quot;</span><span style="color: #E1E4E8">  </span></span>
<span class="line"><span style="color: #E1E4E8">  ]</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span></code></pre></div></div></figure>

<p>其中需要注意一点：<br> <code>files</code> 配置项值是一个<strong>数组</strong>，用来指定了待编译文件，即<strong>入口文件</strong>。<br>当入口文件依赖其他文件时，不需要将被依赖文件也指定到 <code>files</code> 中，因为<strong>编译器会自动将所有的依赖文件归纳为编译对象</strong>，即 <code>index.ts</code> 依赖 <code>user.ts</code> 时，不需要在 <code>files</code> 中指定 <code>user.ts</code> ， <code>user.ts</code> 会自动纳入待编译文件。</p>
<h3 id="4-执行编译"><a href="#4-执行编译" class="headerlink" title="4. 执行编译"></a>4. 执行编译</h3><p>配置完成后，我们可以在命令行执行 <code>tsc</code> 命令，执行编译完成后，我们可以得到一个 <code>index.js</code> 文件和一个 <code>index.js.map</code> 文件，证明我们编译成功，其中 <code>index.js</code> 文件内容如下：</p>
<figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #F97583">function</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">getVersion</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">version</span><span style="color: #E1E4E8">) {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">if</span><span style="color: #E1E4E8"> (version </span><span style="color: #F97583">===</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">void</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">0</span><span style="color: #E1E4E8">) { version </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;1.0.0&quot;</span><span style="color: #E1E4E8">; }</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">return</span><span style="color: #E1E4E8"> version;</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span>
<span class="line"><span style="color: #E1E4E8">console.</span><span style="color: #B392F0">log</span><span style="color: #E1E4E8">(</span><span style="color: #B392F0">getVersion</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;1.0.1&quot;</span><span style="color: #E1E4E8">));</span></span>
<span class="line"><span style="color: #6A737D">//# sourceMappingURL=index.js.map</span></span></code></pre></div></div></figure>

<p>可以看出，tsconfig.json 中的 <code>removeComments</code> 配置生效了，将我们添加的注释代码移除了。</p>
<p>到这一步，就完成了这个简单的示例，接下来会基于这个示例代码，讲解《七、常见配置示例》。</p>
<h2 id="四、tsconfig-json-文件结构介绍"><a href="#四、tsconfig-json-文件结构介绍" class="headerlink" title="四、tsconfig.json 文件结构介绍"></a>四、tsconfig.json 文件结构介绍</h2><h3 id="1-按顶层属性分类"><a href="#1-按顶层属性分类" class="headerlink" title="1. 按顶层属性分类"></a>1. 按顶层属性分类</h3><p>在 tsconfig.json 文件中按照<strong>顶层属性</strong>，分为以下几类：<br><img onerror="imgOnError(this);" data-fancybox="gallery" src="https://segmentfault.com/img/remote/1460000022809334" alt="tsconfig.json 文件结构（顶层属性）.png" data-caption="tsconfig.json 文件结构（顶层属性）.png" loading="lazy"></p>
<p><img onerror="imgOnError(this);" data-fancybox="gallery" src="https://segmentfault.com/img/remote/1460000022809332" alt="了不起的 tsconfig.json 指南.png" data-caption="了不起的 tsconfig.json 指南.png" loading="lazy"></p>
<h3 id="2-按功能分类"><a href="#2-按功能分类" class="headerlink" title="2. 按功能分类"></a>2. 按功能分类</h3><p><img onerror="imgOnError(this);" data-fancybox="gallery" src="https://segmentfault.com/img/remote/1460000022809333" alt="tsconfig.json 文件结构（功能）.png" data-caption="tsconfig.json 文件结构（功能）.png" loading="lazy"></p>
<h2 id="五、tsconfig-json-配置介绍"><a href="#五、tsconfig-json-配置介绍" class="headerlink" title="五、tsconfig.json 配置介绍"></a>五、tsconfig.json 配置介绍</h2><h3 id="1-compileOnSave"><a href="#1-compileOnSave" class="headerlink" title="1. compileOnSave"></a>1. compileOnSave</h3><p><code>compileOnSave</code> 属性作用是<strong>设置保存文件的时候自动编译，但需要编译器支持</strong>。</p>
<figure class="shiki json"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #E1E4E8">{</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// ...</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #79B8FF">&quot;compileOnSave&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">false</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span></code></pre></div></div></figure>



<h3 id="2-compilerOptions"><a href="#2-compilerOptions" class="headerlink" title="2. compilerOptions"></a>2. compilerOptions</h3><p><code>compilerOptions</code> 属性作用是<strong>配置编译选项</strong>。<br>若 <code>compilerOptions</code> 属性被忽略，则编译器会使用默认值，可以查看<a target="_blank" rel="noopener" href="https://www.typescriptlang.org/docs/handbook/compiler-options.html">《官方完整的编译选项列表》</a>。<br>编译选项配置非常繁杂，有很多配置，这里只列出常用的配置。</p>
<figure class="shiki json"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #E1E4E8">{</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// ...</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #79B8FF">&quot;compilerOptions&quot;</span><span style="color: #E1E4E8">: {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;incremental&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// TS编译器在第一次编译之后会生成一个存储编译信息的文件，第二次编译会在第一次的基础上进行增量编译，可以提高编译的速度</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;tsBuildInfoFile&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">&quot;./buildFile&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 增量编译文件的存储位置</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;diagnostics&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 打印诊断信息 </span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;target&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">&quot;ES5&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 目标语言的版本</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;module&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">&quot;CommonJS&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 生成代码的模板标准</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;outFile&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">&quot;./app.js&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 将多个相互依赖的文件生成一个文件，可以用在AMD模块中，即开启时应设置&quot;module&quot;: &quot;AMD&quot;,</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;lib&quot;</span><span style="color: #E1E4E8">: [</span><span style="color: #9ECBFF">&quot;DOM&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&quot;ES2015&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&quot;ScriptHost&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&quot;ES2019.Array&quot;</span><span style="color: #E1E4E8">], </span><span style="color: #6A737D">// TS需要引用的库，即声明文件，es5 默认引用dom、es5、scripthost,如需要使用es的高级版本特性，通常都需要配置，如es8的数组新特性需要引入&quot;ES2019.Array&quot;,</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;allowJS&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 允许编译器编译JS，JSX文件</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;checkJs&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 允许在JS文件中报错，通常与allowJS一起使用</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;outDir&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">&quot;./dist&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 指定输出目录</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;rootDir&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">&quot;./&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 指定输出文件目录(用于输出)，用于控制输出目录结构</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;declaration&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 生成声明文件，开启后会自动生成声明文件</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;declarationDir&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">&quot;./file&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 指定生成声明文件存放目录</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;emitDeclarationOnly&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 只生成声明文件，而不会生成js文件</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;sourceMap&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 生成目标文件的sourceMap文件</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;inlineSourceMap&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 生成目标文件的inline SourceMap，inline SourceMap会包含在生成的js文件中</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;declarationMap&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 为声明文件生成sourceMap</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;typeRoots&quot;</span><span style="color: #E1E4E8">: [], </span><span style="color: #6A737D">// 声明文件目录，默认时node_modules/@types</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;types&quot;</span><span style="color: #E1E4E8">: [], </span><span style="color: #6A737D">// 加载的声明文件包</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;removeComments&quot;</span><span style="color: #E1E4E8">:</span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 删除注释 </span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;noEmit&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 不输出文件,即编译后不会生成任何js文件</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;noEmitOnError&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 发送错误时不输出任何文件</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;noEmitHelpers&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 不生成helper函数，减小体积，需要额外安装，常配合importHelpers一起使用</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;importHelpers&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 通过tslib引入helper函数，文件必须是模块</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;downlevelIteration&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 降级遍历器实现，如果目标源是es3/5，那么遍历器会有降级的实现</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;strict&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 开启所有严格的类型检查</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;alwaysStrict&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 在代码中注入&#39;use strict&#39;</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;noImplicitAny&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 不允许隐式的any类型</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;strictNullChecks&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 不允许把null、undefined赋值给其他类型的变量</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;strictFunctionTypes&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 不允许函数参数双向协变</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;strictPropertyInitialization&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 类的实例属性必须初始化</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;strictBindCallApply&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 严格的bind/call/apply检查</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;noImplicitThis&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 不允许this有隐式的any类型</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;noUnusedLocals&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 检查只声明、未使用的局部变量(只提示不报错)</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;noUnusedParameters&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 检查未使用的函数参数(只提示不报错)</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;noFallthroughCasesInSwitch&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 防止switch语句贯穿(即如果没有break语句后面不会执行)</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;noImplicitReturns&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">//每个分支都会有返回值</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;esModuleInterop&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 允许export=导出，由import from 导入</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;allowUmdGlobalAccess&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 允许在模块中全局变量的方式访问umd模块</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;moduleResolution&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">&quot;node&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 模块解析策略，ts默认用node的解析策略，即相对的方式导入</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;baseUrl&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">&quot;./&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 解析非相对模块的基地址，默认是当前目录</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;paths&quot;</span><span style="color: #E1E4E8">: { </span><span style="color: #6A737D">// 路径映射，相对于baseUrl</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #6A737D">// 如使用jq时不想使用默认版本，而需要手动指定版本，可进行如下配置</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #79B8FF">&quot;jquery&quot;</span><span style="color: #E1E4E8">: [</span><span style="color: #9ECBFF">&quot;node_modules/jquery/dist/jquery.min.js&quot;</span><span style="color: #E1E4E8">]</span></span>
<span class="line"><span style="color: #E1E4E8">    },</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;rootDirs&quot;</span><span style="color: #E1E4E8">: [</span><span style="color: #9ECBFF">&quot;src&quot;</span><span style="color: #E1E4E8">,</span><span style="color: #9ECBFF">&quot;out&quot;</span><span style="color: #E1E4E8">], </span><span style="color: #6A737D">// 将多个目录放在一个虚拟目录下，用于运行时，即编译后引入文件的位置可能发生变化，这也设置可以虚拟src和out在同一个目录下，不用再去改变路径也不会报错</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;listEmittedFiles&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">, </span><span style="color: #6A737D">// 打印输出文件</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;listFiles&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span><span style="color: #6A737D">// 打印编译的文件(包括引用的声明文件)</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span></code></pre></div></div></figure>



<h3 id="3-exclude"><a href="#3-exclude" class="headerlink" title="3. exclude"></a>3. exclude</h3><p><code>exclude</code> 属性作用是<strong>指定编译器需要排除的文件或文件夹。</strong><br>默认排除 <code>node_modules</code> 文件夹下文件。</p>
<figure class="shiki json"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #E1E4E8">{</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// ...</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #79B8FF">&quot;exclude&quot;</span><span style="color: #E1E4E8">: [</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #9ECBFF">&quot;src/lib&quot;</span><span style="color: #E1E4E8"> </span><span style="color: #6A737D">// 排除src目录下的lib文件夹下的文件不会编译</span></span>
<span class="line"><span style="color: #E1E4E8">  ]</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span></code></pre></div></div></figure>

<p>和 <code>include</code> 属性一样，支持 glob 通配符：</p>
<ul>
<li><code>*</code> 匹配0或多个字符（不包括目录分隔符）</li>
<li><code>?</code> 匹配一个任意字符（不包括目录分隔符）</li>
<li><code>**/</code> 递归匹配任意子目录</li>
</ul>
<h3 id="4-extends"><a href="#4-extends" class="headerlink" title="4. extends"></a>4. extends</h3><p><code>extends</code> 属性作用是<strong>引入其他配置文件，继承配置</strong>。<br>默认包含当前目录和子目录下所有 TypeScript 文件。</p>
<figure class="shiki json"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #E1E4E8">{</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// ...</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 把基础配置抽离成tsconfig.base.json文件，然后引入</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;extends&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">&quot;./tsconfig.base.json&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span></code></pre></div></div></figure>



<h3 id="5-files"><a href="#5-files" class="headerlink" title="5. files"></a>5. files</h3><p><code>files</code> 属性作用是<strong>指定需要编译的单个文件列表</strong>。<br>默认包含当前目录和子目录下所有 TypeScript 文件。</p>
<figure class="shiki json"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #E1E4E8">{</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// ...</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #79B8FF">&quot;files&quot;</span><span style="color: #E1E4E8">: [</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// 指定编译文件是src目录下的leo.ts文件</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #9ECBFF">&quot;scr/leo.ts&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">  ]</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span></code></pre></div></div></figure>



<h3 id="6-include"><a href="#6-include" class="headerlink" title="6. include"></a>6. include</h3><p><code>include</code> 属性作用是<strong>指定编译需要编译的文件或目录</strong>。</p>
<figure class="shiki json"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #E1E4E8">{</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// ...</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #79B8FF">&quot;include&quot;</span><span style="color: #E1E4E8">: [</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// &quot;scr&quot; // 会编译src目录下的所有文件，包括子目录</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// &quot;scr/*&quot; // 只会编译scr一级目录下的文件</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #9ECBFF">&quot;scr/*/*&quot;</span><span style="color: #E1E4E8"> </span><span style="color: #6A737D">// 只会编译scr二级目录下的文件</span></span>
<span class="line"><span style="color: #E1E4E8">  ]</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span></code></pre></div></div></figure>



<h3 id="7-references"><a href="#7-references" class="headerlink" title="7. references"></a>7. references</h3><p><code>references</code> 属性作用是<strong>指定工程引用依赖。</strong><br>在项目开发中，有时候我们为了方便将前端项目和后端<code>node</code>项目放在同一个目录下开发，两个项目依赖同一个配置文件和通用文件，但我们希望前后端项目进行灵活的分别打包，那么我们可以进行如下配置：</p>
<figure class="shiki json"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #E1E4E8">{</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// ...</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #79B8FF">&quot;references&quot;</span><span style="color: #E1E4E8">: [ </span><span style="color: #6A737D">// 指定依赖的工程</span></span>
<span class="line"><span style="color: #E1E4E8">     {</span><span style="color: #79B8FF">&quot;path&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">&quot;./common&quot;</span><span style="color: #E1E4E8">}</span></span>
<span class="line"><span style="color: #E1E4E8">  ]</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span></code></pre></div></div></figure>



<h3 id="8-typeAcquisition"><a href="#8-typeAcquisition" class="headerlink" title="8. typeAcquisition"></a>8. typeAcquisition</h3><p><code>typeAcquisition</code> 属性作用是<strong>设置自动引入库类型定义文件(.d.ts)相关。</strong><br>包含 3 个子属性：</p>
<ul>
<li><code>enable</code> : 布尔类型，是否开启自动引入库类型定义文件(.d.ts)，默认为 false；</li>
<li><code>include</code> : 数组类型，允许自动引入的库名，如：[“jquery”, “lodash”]；</li>
<li><code>exculde</code> : 数组类型，排除的库名。</li>
</ul>
<figure class="shiki json"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #E1E4E8">{</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #6A737D">// ...</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #79B8FF">&quot;typeAcquisition&quot;</span><span style="color: #E1E4E8">: {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;enable&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">false</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;exclude&quot;</span><span style="color: #E1E4E8">: [</span><span style="color: #9ECBFF">&quot;jquery&quot;</span><span style="color: #E1E4E8">],</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;include&quot;</span><span style="color: #E1E4E8">: [</span><span style="color: #9ECBFF">&quot;jest&quot;</span><span style="color: #E1E4E8">]</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span></code></pre></div></div></figure>



<h2 id="六、常见配置示例"><a href="#六、常见配置示例" class="headerlink" title="六、常见配置示例"></a>六、常见配置示例</h2><p>本部分内容中，我们找了几个实际开发中比较常见的配置，当然，还有很多配置需要自己摸索哟~~</p>
<h3 id="1-移除代码中注释"><a href="#1-移除代码中注释" class="headerlink" title="1. 移除代码中注释"></a>1. 移除代码中注释</h3><p>tsconfig.json：</p>
<figure class="shiki json"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #E1E4E8">{</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #79B8FF">&quot;compilerOptions&quot;</span><span style="color: #E1E4E8">: {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;removeComments&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span></code></pre></div></div></figure>

<p>编译前：</p>
<figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #6A737D">// 返回当前版本号</span></span>
<span class="line"><span style="color: #F97583">function</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">getVersion</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">version</span><span style="color: #F97583">:</span><span style="color: #79B8FF">string</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;1.0.0&quot;</span><span style="color: #E1E4E8">)</span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">string</span><span style="color: #E1E4E8">{</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">return</span><span style="color: #E1E4E8"> version;</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span>
<span class="line"><span style="color: #E1E4E8">console.</span><span style="color: #B392F0">log</span><span style="color: #E1E4E8">(</span><span style="color: #B392F0">getVersion</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;1.0.1&quot;</span><span style="color: #E1E4E8">))</span></span></code></pre></div></div></figure>

<p>编译结果：</p>
<figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #F97583">function</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">getVersion</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">version</span><span style="color: #E1E4E8">) {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">if</span><span style="color: #E1E4E8"> (version </span><span style="color: #F97583">===</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">void</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">0</span><span style="color: #E1E4E8">) { version </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;1.0.0&quot;</span><span style="color: #E1E4E8">; }</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">return</span><span style="color: #E1E4E8"> version;</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span>
<span class="line"><span style="color: #E1E4E8">console.</span><span style="color: #B392F0">log</span><span style="color: #E1E4E8">(</span><span style="color: #B392F0">getVersion</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;1.0.1&quot;</span><span style="color: #E1E4E8">));</span></span></code></pre></div></div></figure>



<h3 id="2-开启null、undefined检测"><a href="#2-开启null、undefined检测" class="headerlink" title="2. 开启null、undefined检测"></a>2. 开启null、undefined检测</h3><p>tsconfig.json：</p>
<figure class="shiki"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #e1e4e8">{</span></span>
<span class="line"><span style="color: #e1e4e8">    &quot;compilerOptions&quot;: {</span></span>
<span class="line"><span style="color: #e1e4e8">        &quot;strictNullChecks&quot;: true</span></span>
<span class="line"><span style="color: #e1e4e8">    },</span></span>
<span class="line"><span style="color: #e1e4e8">}</span></span></code></pre></div></div></figure>

<p>修改 <code>index.ts</code> 文件内容：</p>
<figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">leo</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">leo </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">new</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">Pingan</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&#39;leo&#39;</span><span style="color: #E1E4E8">,</span><span style="color: #9ECBFF">&#39;hello&#39;</span><span style="color: #E1E4E8">);</span></span></code></pre></div></div></figure>


<p>这时候编辑器也会提示错误信息，执行 <code>tsc</code> 后，控制台报错：</p>
<figure class="shiki text"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #e1e4e8">src/index.ts:9:11 - error TS2304: Cannot find name &#39;Pingan&#39;.</span></span>
<span class="line"><span style="color: #e1e4e8"></span></span>
<span class="line"><span style="color: #e1e4e8">9 leo = new Pingan(&#39;leo&#39;,&#39;hello&#39;);</span></span>
<span class="line"><span style="color: #e1e4e8"></span></span>
<span class="line"><span style="color: #e1e4e8">Found 1 error.</span></span></code></pre></div></div></figure>



<h3 id="3-配置复用"><a href="#3-配置复用" class="headerlink" title="3. 配置复用"></a>3. 配置复用</h3><p>通过 <code>extends</code> 属性实现配置复用，即一个配置文件可以继承另一个文件的配置属性。<br>比如，建立一个基础的配置文件 <code>configs/base.json</code> ：</p>
<figure class="shiki json"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #E1E4E8">{</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #79B8FF">&quot;compilerOptions&quot;</span><span style="color: #E1E4E8">: {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;noImplicitAny&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;strictNullChecks&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span></code></pre></div></div></figure>

<p>在<code>tsconfig.json</code> 就可以引用这个文件的配置了：</p>
<figure class="shiki json"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #E1E4E8">{</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #79B8FF">&quot;extends&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">&quot;./configs/base&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #79B8FF">&quot;files&quot;</span><span style="color: #E1E4E8">: [</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #9ECBFF">&quot;main.ts&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #9ECBFF">&quot;supplemental.ts&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">  ]</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span></code></pre></div></div></figure>



<h3 id="4-生成枚举的映射代码"><a href="#4-生成枚举的映射代码" class="headerlink" title="4. 生成枚举的映射代码"></a>4. 生成枚举的映射代码</h3><p>在默认情况下，使用 <code>const</code> 修饰符后，枚举不会生成映射代码。<br>如下，我们可以看出：使用 <code>const</code> 修饰符后，编译器不会生成任何 <code>RequestMethod</code> 枚举的任何映射代码，在其他地方使用时，内联每个成员的值，节省很大开销。</p>
<figure class="shiki"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #e1e4e8">const enum RequestMethod {</span></span>
<span class="line"><span style="color: #e1e4e8">  Get,</span></span>
<span class="line"><span style="color: #e1e4e8">  Post,</span></span>
<span class="line"><span style="color: #e1e4e8">  Put,</span></span>
<span class="line"><span style="color: #e1e4e8">  Delete</span></span>
<span class="line"><span style="color: #e1e4e8">}</span></span>
<span class="line"><span style="color: #e1e4e8"></span></span>
<span class="line"><span style="color: #e1e4e8">let methods = [</span></span>
<span class="line"><span style="color: #e1e4e8">  RequestMethod.Get,</span></span>
<span class="line"><span style="color: #e1e4e8">  RequestMethod.Post</span></span>
<span class="line"><span style="color: #e1e4e8">]</span></span></code></pre></div></div></figure>

<p>编译结果：</p>
<figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #9ECBFF">&quot;use strict&quot;</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #F97583">let</span><span style="color: #E1E4E8"> methods </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> [</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">0</span><span style="color: #E1E4E8"> </span><span style="color: #6A737D">/* Get */</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">1</span><span style="color: #E1E4E8"> </span><span style="color: #6A737D">/* Post */</span></span>
<span class="line"><span style="color: #E1E4E8">];</span></span></code></pre></div></div></figure>

<p>当然，我们希望生成映射代码时，也可以设置 <code>tsconfig.json</code> 中的配置，设置 <code>preserveConstEnums</code> 编译器选项为 <code>true</code> ：</p>
<figure class="shiki json"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #E1E4E8">{</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #79B8FF">&quot;compilerOptions&quot;</span><span style="color: #E1E4E8">: {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;target&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">&quot;es5&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;preserveConstEnums&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span></code></pre></div></div></figure>


<p>最后编译结果变成：</p>
<figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #9ECBFF">&quot;use strict&quot;</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #F97583">var</span><span style="color: #E1E4E8"> RequestMethod;</span></span>
<span class="line"><span style="color: #E1E4E8">(</span><span style="color: #F97583">function</span><span style="color: #E1E4E8"> (</span><span style="color: #FFAB70">RequestMethod</span><span style="color: #E1E4E8">) {</span></span>
<span class="line"><span style="color: #E1E4E8">    RequestMethod[RequestMethod[</span><span style="color: #9ECBFF">&quot;Get&quot;</span><span style="color: #E1E4E8">] </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">0</span><span style="color: #E1E4E8">] </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;Get&quot;</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">    RequestMethod[RequestMethod[</span><span style="color: #9ECBFF">&quot;Post&quot;</span><span style="color: #E1E4E8">] </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">1</span><span style="color: #E1E4E8">] </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;Post&quot;</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">    RequestMethod[RequestMethod[</span><span style="color: #9ECBFF">&quot;Put&quot;</span><span style="color: #E1E4E8">] </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">2</span><span style="color: #E1E4E8">] </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;Put&quot;</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">    RequestMethod[RequestMethod[</span><span style="color: #9ECBFF">&quot;Delete&quot;</span><span style="color: #E1E4E8">] </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">3</span><span style="color: #E1E4E8">] </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;Delete&quot;</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">})(RequestMethod </span><span style="color: #F97583">||</span><span style="color: #E1E4E8"> (RequestMethod </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {}));</span></span>
<span class="line"><span style="color: #F97583">let</span><span style="color: #E1E4E8"> methods </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> [</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">0</span><span style="color: #E1E4E8"> </span><span style="color: #6A737D">/* Get */</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">1</span><span style="color: #E1E4E8"> </span><span style="color: #6A737D">/* Post */</span></span>
<span class="line"><span style="color: #E1E4E8">];</span></span></code></pre></div></div></figure>



<h3 id="5-关闭-this-类型注解提示"><a href="#5-关闭-this-类型注解提示" class="headerlink" title="5. 关闭 this 类型注解提示"></a>5. 关闭 this 类型注解提示</h3><p>通过下面代码编译后会报错：</p>
<figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">button</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> document.</span><span style="color: #B392F0">querySelector</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;button&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #E1E4E8">button?.</span><span style="color: #B392F0">addEventListener</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;click&quot;</span><span style="color: #E1E4E8">, handleClick);</span></span>
<span class="line"><span style="color: #F97583">function</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">handleClick</span><span style="color: #E1E4E8">(</span><span style="color: #79B8FF">this</span><span style="color: #E1E4E8">) {</span></span>
<span class="line"><span style="color: #E1E4E8"> console.</span><span style="color: #B392F0">log</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;Clicked!&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">this</span><span style="color: #E1E4E8">.</span><span style="color: #B392F0">removeEventListener</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;click&quot;</span><span style="color: #E1E4E8">, handleClick);</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span></code></pre></div></div></figure>


<p>报错内容：</p>
<figure class="shiki text"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #e1e4e8">src/index.ts:10:22 - error TS7006: Parameter &#39;this&#39; implicitly has an &#39;any&#39; type.</span></span>
<span class="line"><span style="color: #e1e4e8">10 function handleClick(this) {</span></span>
<span class="line"><span style="color: #e1e4e8">Found 1 error.</span></span></code></pre></div></div></figure>


<p>这是因为 <code>this</code> 隐式具有 <code>any</code> 类型，如果没有指定类型注解，编译器会提示“”this” 隐式具有类型 “any”，因为它没有类型注释。”。</p>
<p>解决方法有2种：</p>
<ol>
<li>指定 this 类型，如本代码中为 <code>HTMLElement</code> 类型：</li>
</ol>
<p><code>HTMLElement</code> 接口表示所有的 HTML 元素。一些HTML元素直接实现了 <code>HTMLElement</code> 接口，其它的间接实现<code>HTMLElement</code>接口。<br>关于<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement"> HTMLElement </a>可查看详细。</p>
<ol>
<li>使用 <code>--noImplicitThis</code> 配置项：</li>
</ol>
<p>在 TS2.0 还增加一个新的编译选项： <code>--noImplicitThis</code>，表示当 <code>this</code> 表达式值为 <code>any</code> 类型时生成一个错误信息。我们设置为 <code>true</code> 后就能正常编译。</p>
<figure class="shiki json"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #E1E4E8">{</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #79B8FF">&quot;compilerOptions&quot;</span><span style="color: #E1E4E8">: {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;noImplicitThis&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span></code></pre></div></div></figure>



<h2 id="七、Webpack-React-中使用示例"><a href="#七、Webpack-React-中使用示例" class="headerlink" title="七、Webpack&#x2F;React 中使用示例"></a>七、Webpack&#x2F;React 中使用示例</h2><h3 id="1-配置编译-ES6-代码，JSX-文件"><a href="#1-配置编译-ES6-代码，JSX-文件" class="headerlink" title="1. 配置编译 ES6 代码，JSX 文件"></a>1. 配置编译 ES6 代码，JSX 文件</h3><p>创建测试项目 webpack-demo，结构如下：</p>
<figure class="shiki text"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #e1e4e8">webpack-demo/</span></span>
<span class="line"><span style="color: #e1e4e8">  |- package.json</span></span>
<span class="line"><span style="color: #e1e4e8">  |- tsconfig.json</span></span>
<span class="line"><span style="color: #e1e4e8">  |- webpack.config.js</span></span>
<span class="line"><span style="color: #e1e4e8">  |- /dist</span></span>
<span class="line"><span style="color: #e1e4e8">    |- bundle.js</span></span>
<span class="line"><span style="color: #e1e4e8">    |- index.html</span></span>
<span class="line"><span style="color: #e1e4e8">  |- /src</span></span>
<span class="line"><span style="color: #e1e4e8">    |- index.js</span></span>
<span class="line"><span style="color: #e1e4e8">    |- index.ts</span></span>
<span class="line"><span style="color: #e1e4e8">  |- /node_modules</span></span></code></pre></div></div></figure>

<p>安装 TypeScript 和 ts-loader：</p>
<figure class="shiki"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #e1e4e8">$ npm install --save-dev typescript ts-loader</span></span></code></pre></div></div></figure>

<p>配置 tsconfig.json，支持 JSX，并将 TypeScript 编译为 ES5：</p>
<figure class="shiki json"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #E1E4E8">{</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #79B8FF">&quot;compilerOptions&quot;</span><span style="color: #E1E4E8">: {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;outDir&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">&quot;./dist/&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;noImplicitAny&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #FDAEB7; font-style: italic">+</span><span style="color: #E1E4E8">   </span><span style="color: #79B8FF">&quot;module&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">&quot;es6&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #FDAEB7; font-style: italic">+</span><span style="color: #E1E4E8">   </span><span style="color: #79B8FF">&quot;target&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">&quot;es5&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #FDAEB7; font-style: italic">+</span><span style="color: #E1E4E8">   </span><span style="color: #79B8FF">&quot;jsx&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">&quot;react&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;allowJs&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span></code></pre></div></div></figure>

<p>还需要配置 webpack.config.js，使其能够处理 TypeScript 代码，这里主要在 <code>rules</code> 中添加 <code>ts-loader</code> ：</p>
<figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">path</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">require</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&#39;path&#39;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"></span>
<span class="line"><span style="color: #79B8FF">module</span><span style="color: #E1E4E8">.</span><span style="color: #79B8FF">exports</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  entry: </span><span style="color: #9ECBFF">&#39;./src/index.ts&#39;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  module: {</span></span>
<span class="line"><span style="color: #E1E4E8">    rules: [</span></span>
<span class="line"><span style="color: #E1E4E8">      {</span></span>
<span class="line"><span style="color: #E1E4E8">        test:</span><span style="color: #DBEDFF"> </span><span style="color: #9ECBFF">/</span><span style="color: #85E89D; font-weight: bold">\.</span><span style="color: #DBEDFF">tsx</span><span style="color: #F97583">?$</span><span style="color: #9ECBFF">/</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">        use: </span><span style="color: #9ECBFF">&#39;ts-loader&#39;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">        exclude:</span><span style="color: #DBEDFF"> </span><span style="color: #9ECBFF">/</span><span style="color: #DBEDFF">node_modules</span><span style="color: #9ECBFF">/</span></span>
<span class="line"><span style="color: #E1E4E8">      }</span></span>
<span class="line"><span style="color: #E1E4E8">    ]</span></span>
<span class="line"><span style="color: #E1E4E8">  },</span></span>
<span class="line"><span style="color: #E1E4E8">  resolve: {</span></span>
<span class="line"><span style="color: #E1E4E8">    extensions: [ </span><span style="color: #9ECBFF">&#39;.tsx&#39;</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&#39;.ts&#39;</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&#39;.js&#39;</span><span style="color: #E1E4E8"> ]</span></span>
<span class="line"><span style="color: #E1E4E8">  },</span></span>
<span class="line"><span style="color: #E1E4E8">  output: {</span></span>
<span class="line"><span style="color: #E1E4E8">    filename: </span><span style="color: #9ECBFF">&#39;bundle.js&#39;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">    path: path.</span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(__dirname, </span><span style="color: #9ECBFF">&#39;dist&#39;</span><span style="color: #E1E4E8">)</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span></code></pre></div></div></figure>



<h3 id="2-配置-source-map"><a href="#2-配置-source-map" class="headerlink" title="2. 配置 source map"></a>2. 配置 source map</h3><p>想要启用 source map，我们必须配置 TypeScript，以将内联的 source map 输出到编译后的 JavaScript 文件中。<br>只需要在 tsconfig.json 中配置 sourceMap 属性：</p>
<figure class="shiki json"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #E1E4E8">  {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">&quot;compilerOptions&quot;</span><span style="color: #E1E4E8">: {</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #79B8FF">&quot;outDir&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">&quot;./dist/&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #FDAEB7; font-style: italic">+</span><span style="color: #E1E4E8">     </span><span style="color: #79B8FF">&quot;sourceMap&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #79B8FF">&quot;noImplicitAny&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #79B8FF">&quot;module&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">&quot;commonjs&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #79B8FF">&quot;target&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">&quot;es5&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #79B8FF">&quot;jsx&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #9ECBFF">&quot;react&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #79B8FF">&quot;allowJs&quot;</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">true</span></span>
<span class="line"><span style="color: #E1E4E8">    }</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span></code></pre></div></div></figure>

<p>然后配置 webpack.config.js 文件，让 webpack 提取 source map，并内联到最终的 bundle 中：</p>
<figure class="shiki javascript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #E1E4E8">  </span><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">path</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">require</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&#39;path&#39;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #79B8FF">module</span><span style="color: #E1E4E8">.</span><span style="color: #79B8FF">exports</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">    entry: </span><span style="color: #9ECBFF">&#39;./src/index.ts&#39;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">+   devtool: </span><span style="color: #9ECBFF">&#39;inline-source-map&#39;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">    module: {</span></span>
<span class="line"><span style="color: #E1E4E8">      rules: [</span></span>
<span class="line"><span style="color: #E1E4E8">        {</span></span>
<span class="line"><span style="color: #E1E4E8">          test:</span><span style="color: #DBEDFF"> </span><span style="color: #9ECBFF">/</span><span style="color: #85E89D; font-weight: bold">\.</span><span style="color: #DBEDFF">tsx</span><span style="color: #F97583">?$</span><span style="color: #9ECBFF">/</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">          use: </span><span style="color: #9ECBFF">&#39;ts-loader&#39;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">          exclude:</span><span style="color: #DBEDFF"> </span><span style="color: #9ECBFF">/</span><span style="color: #DBEDFF">node_modules</span><span style="color: #9ECBFF">/</span></span>
<span class="line"><span style="color: #E1E4E8">        }</span></span>
<span class="line"><span style="color: #E1E4E8">      ]</span></span>
<span class="line"><span style="color: #E1E4E8">    },</span></span>
<span class="line"><span style="color: #E1E4E8">    resolve: {</span></span>
<span class="line"><span style="color: #E1E4E8">      extensions: [ </span><span style="color: #9ECBFF">&#39;.tsx&#39;</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&#39;.ts&#39;</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&#39;.js&#39;</span><span style="color: #E1E4E8"> ]</span></span>
<span class="line"><span style="color: #E1E4E8">    },</span></span>
<span class="line"><span style="color: #E1E4E8">    output: {</span></span>
<span class="line"><span style="color: #E1E4E8">      filename: </span><span style="color: #9ECBFF">&#39;bundle.js&#39;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">      path: path.</span><span style="color: #B392F0">resolve</span><span style="color: #E1E4E8">(__dirname, </span><span style="color: #9ECBFF">&#39;dist&#39;</span><span style="color: #E1E4E8">)</span></span>
<span class="line"><span style="color: #E1E4E8">    }</span></span>
<span class="line"><span style="color: #E1E4E8">  };</span></span></code></pre></div></div></figure>



<h2 id="八、总结"><a href="#八、总结" class="headerlink" title="八、总结"></a>八、总结</h2><p>本文较全面介绍了 tsconfig.json 文件的知识，从“什么是 tsconfig.js 文件”开始，一步步带领大家全面认识 tsconfig.json 文件。<br>文中通过一个简单 learnTsconfig 项目，让大家知道项目中如何使用 tsconfig.json 文件。在后续文章中，我们将这么多的配置项进行分类学习。最后通过几个常见配置示例，解决我们开发中遇到的几个常见问题。</p>
<p>当然，本文篇幅有限，无法针对每个属性进行深入介绍，这就需要大家在实际开发中，多去尝试和使用啦~</p>
<h2 id="九、学习和参考资料"><a href="#九、学习和参考资料" class="headerlink" title="九、学习和参考资料"></a>九、学习和参考资料</h2><p>1.<a target="_blank" rel="noopener" href="https://www.typescriptlang.org/tsconfig">《Intro to the TSConfig Reference》</a><br>2.<a target="_blank" rel="noopener" href="https://www.tslang.cn/docs/handbook/tsconfig-json.html">《tsconfig.json》</a><br>3.<a target="_blank" rel="noopener" href="http://json.schemastore.org/tsconfig">《TypeScript编译器的配置文件的JSON模式》</a><br>4.<a target="_blank" rel="noopener" href="https://www.jianshu.com/p/0383bbd61a6b">《详解TypeScript项目中的tsconfig.json配置》</a><br>5.<a target="_blank" rel="noopener" href="https://www.typescriptlang.org/docs/handbook/compiler-options.html">《官方完整的编译选项列表》</a></p>

    
  </article>

  
      
    <div class="nexmoe-post-copyright">
        <strong>本文作者：</strong>pingan8787<br>
        
            <strong>文章来源：</strong><a href="https://segmentfault.com/a/1190000022809326" title="https:&#x2F;&#x2F;segmentfault.com&#x2F;a&#x2F;1190000022809326" target="_blank" rel="noopener">https:&#x2F;&#x2F;segmentfault.com&#x2F;a&#x2F;1190000022809326</a><br>
        
        <strong>本文链接：</strong><a href="https://www.tangyuxian.com/2021/06/09/%E5%89%8D%E7%AB%AF/node/node-tsconfig-json%E9%85%8D%E7%BD%AE%E7%9B%B8%E5%85%B3/" title="https:&#x2F;&#x2F;www.tangyuxian.com&#x2F;2021&#x2F;06&#x2F;09&#x2F;%E5%89%8D%E7%AB%AF&#x2F;node&#x2F;node-tsconfig-json%E9%85%8D%E7%BD%AE%E7%9B%B8%E5%85%B3&#x2F;" target="_blank" rel="noopener">https:&#x2F;&#x2F;www.tangyuxian.com&#x2F;2021&#x2F;06&#x2F;09&#x2F;%E5%89%8D%E7%AB%AF&#x2F;node&#x2F;node-tsconfig-json%E9%85%8D%E7%BD%AE%E7%9B%B8%E5%85%B3&#x2F;</a><br>

        
            <strong>版权声明：</strong>本文采用 <a href="https://creativecommons.org/licenses/by-nc-sa/3.0/cn/deed.zh" target="_blank">CC BY-NC-SA 3.0 CN</a> 协议进行许可

        
    </div>


  
  
  <div class="nexmoe-post-meta nexmoe-rainbow">
   
    
        <a class="nexmoefont icon-tag-fill -none-link" href="/tags/node/" rel="tag">node</a> <a class="nexmoefont icon-tag-fill -none-link" href="/tags/%E8%BD%AC%E8%BD%BD/" rel="tag">转载</a>
    
</div>
  
  
    <script async src="/js/copy-codeblock.js?v=1763992123960"></script>
  

  
      <div class="nexmoe-post-footer">
          <div class="valine"></div>
<script src='https://lib.baomitu.com/valine/1.3.9/Valine.min.js'></script>
<script>
  new Valine({
      el: '.valine',
      appId: 'r5zxC0st0DDjPA9auXzMV7HY-gzGzoHsz',
      appKey: '3bqCsovpyfTPHUzTHovd3V3V'
  })
</script>

      </div>
  
</div></div><div class="nexmoe-post-right">    <div class="nexmoe-fixed">
        <div class="nexmoe-tool">

            

            
            
            <button class="mdui-fab catalog" style="overflow:unset;">
                <i class="nexmoefont icon-i-catalog"></i>
                <div class="nexmoe-toc">
                    <ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E5%88%9D%E5%A7%8B%E5%8C%96-learnTsconfig-%E9%A1%B9%E7%9B%AE"><span class="toc-number">1.</span> <span class="toc-text">1. 初始化 learnTsconfig 项目</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E5%88%9D%E5%A7%8B%E5%8C%96-tsconfig-json-%E6%96%87%E4%BB%B6"><span class="toc-number">2.</span> <span class="toc-text">2. 初始化 tsconfig.json 文件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E4%BF%AE%E6%94%B9-tsconfig-json-%E6%96%87%E4%BB%B6"><span class="toc-number">3.</span> <span class="toc-text">3. 修改 tsconfig.json 文件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E6%89%A7%E8%A1%8C%E7%BC%96%E8%AF%91"><span class="toc-number">4.</span> <span class="toc-text">4. 执行编译</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9B%9B%E3%80%81tsconfig-json-%E6%96%87%E4%BB%B6%E7%BB%93%E6%9E%84%E4%BB%8B%E7%BB%8D"><span class="toc-number"></span> <span class="toc-text">四、tsconfig.json 文件结构介绍</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E6%8C%89%E9%A1%B6%E5%B1%82%E5%B1%9E%E6%80%A7%E5%88%86%E7%B1%BB"><span class="toc-number">1.</span> <span class="toc-text">1. 按顶层属性分类</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E6%8C%89%E5%8A%9F%E8%83%BD%E5%88%86%E7%B1%BB"><span class="toc-number">2.</span> <span class="toc-text">2. 按功能分类</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BA%94%E3%80%81tsconfig-json-%E9%85%8D%E7%BD%AE%E4%BB%8B%E7%BB%8D"><span class="toc-number"></span> <span class="toc-text">五、tsconfig.json 配置介绍</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-compileOnSave"><span class="toc-number">1.</span> <span class="toc-text">1. compileOnSave</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-compilerOptions"><span class="toc-number">2.</span> <span class="toc-text">2. compilerOptions</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-exclude"><span class="toc-number">3.</span> <span class="toc-text">3. exclude</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-extends"><span class="toc-number">4.</span> <span class="toc-text">4. extends</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-files"><span class="toc-number">5.</span> <span class="toc-text">5. files</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#6-include"><span class="toc-number">6.</span> <span class="toc-text">6. include</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#7-references"><span class="toc-number">7.</span> <span class="toc-text">7. references</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#8-typeAcquisition"><span class="toc-number">8.</span> <span class="toc-text">8. typeAcquisition</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%AD%E3%80%81%E5%B8%B8%E8%A7%81%E9%85%8D%E7%BD%AE%E7%A4%BA%E4%BE%8B"><span class="toc-number"></span> <span class="toc-text">六、常见配置示例</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E7%A7%BB%E9%99%A4%E4%BB%A3%E7%A0%81%E4%B8%AD%E6%B3%A8%E9%87%8A"><span class="toc-number">1.</span> <span class="toc-text">1. 移除代码中注释</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E5%BC%80%E5%90%AFnull%E3%80%81undefined%E6%A3%80%E6%B5%8B"><span class="toc-number">2.</span> <span class="toc-text">2. 开启null、undefined检测</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E9%85%8D%E7%BD%AE%E5%A4%8D%E7%94%A8"><span class="toc-number">3.</span> <span class="toc-text">3. 配置复用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E7%94%9F%E6%88%90%E6%9E%9A%E4%B8%BE%E7%9A%84%E6%98%A0%E5%B0%84%E4%BB%A3%E7%A0%81"><span class="toc-number">4.</span> <span class="toc-text">4. 生成枚举的映射代码</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-%E5%85%B3%E9%97%AD-this-%E7%B1%BB%E5%9E%8B%E6%B3%A8%E8%A7%A3%E6%8F%90%E7%A4%BA"><span class="toc-number">5.</span> <span class="toc-text">5. 关闭 this 类型注解提示</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%83%E3%80%81Webpack-React-%E4%B8%AD%E4%BD%BF%E7%94%A8%E7%A4%BA%E4%BE%8B"><span class="toc-number"></span> <span class="toc-text">七、Webpack&#x2F;React 中使用示例</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E9%85%8D%E7%BD%AE%E7%BC%96%E8%AF%91-ES6-%E4%BB%A3%E7%A0%81%EF%BC%8CJSX-%E6%96%87%E4%BB%B6"><span class="toc-number">1.</span> <span class="toc-text">1. 配置编译 ES6 代码，JSX 文件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E9%85%8D%E7%BD%AE-source-map"><span class="toc-number">2.</span> <span class="toc-text">2. 配置 source map</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%AB%E3%80%81%E6%80%BB%E7%BB%93"><span class="toc-number"></span> <span class="toc-text">八、总结</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B9%9D%E3%80%81%E5%AD%A6%E4%B9%A0%E5%92%8C%E5%8F%82%E8%80%83%E8%B5%84%E6%96%99"><span class="toc-number"></span> <span class="toc-text">九、学习和参考资料</span></a>
                </div>
            </button>
            

            

            <a href="#nexmoe-content" class="backtop toc-link" aria-label="Back To Top" title="top"><button class="mdui-fab mdui-ripple"><i class="nexmoefont icon-caret-top"></i></button></a>
        </div>
    </div>
</div></div><div id="nexmoe-pendant"><div class="nexmoe-drawer mdui-drawer nexmoe-pd" id="drawer">
    
        
            <div class="nexmoe-pd-item">
                <div class="clock">
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="needle" id="hours"></div>
        <div class="needle" id="minutes"></div>
        <div class="needle" id="seconds"></div>
        <div class="clock_logo">

        </div>

    </div>
<script>
        // ----- Variable declaration

        var data = {
                dt: new Date(),
                hours: {
                        el: document.querySelector('#hours'),
                        val: 0 },

                minutes: {
                        el: document.querySelector('#minutes'),
                        val: 0 },

                seconds: {
                        el: document.querySelector('#seconds'),
                        val: 0 },

                renderTime: 1000 };


        // ----- Clock rendering logic

        updateTime = () => {
                let hour = data.dt.getHours();
                let minute = data.dt.getMinutes();
                let second = data.dt.getSeconds();

                data.hours.el.classList.add('moving');
                data.minutes.el.classList.add('moving');
                data.seconds.el.classList.add('moving');

                data.hours.val = hour == 0 && data.hours.val == 59 * 6 * 5 ? 360 : hour * 6 * 5;
                data.minutes.val = minute == 0 && data.minutes.val == 59 * 6 ? 360 : minute * 6;
                data.seconds.val = second == 0 && data.seconds.val == 59 * 6 ? 360 : second * 6;

                data.hours.el.style.transform = `translate(-50%, -75%) rotate(${data.hours.val}deg)`;
                data.minutes.el.style.transform = `translate(-50%, -75%) rotate(${data.minutes.val}deg)`;
                data.seconds.el.style.transform = `translate(-50%, -75%) rotate(${data.seconds.val}deg)`;

                data.dt.setSeconds(second + 1);
        };

        // ----- Clock execution

        setInterval(() => {
                updateTime();
        }, data.renderTime);

        updateTime();

        // ----- Events area

        data.seconds.el.addEventListener('transitionend', () => {
                data.hours.el.classList.remove('moving');
                data.minutes.el.classList.remove('moving');
                data.seconds.el.classList.remove('moving');

                // if (data.hours.val == 360) {
                //   data.hours.el.style.transform = 'translate(-50%, -75%) rotate(0deg)';
                // }

                if (data.minutes.val == 360) {
                        data.minutes.el.style.transform = 'translate(-50%, -75%) rotate(0deg)';
                }

                if (data.seconds.val == 360) {
                        data.seconds.el.style.transform = 'translate(-50%, -75%) rotate(0deg)';
                }
        });

</script>
<style>
    .clock {
        background-color: #ffffff;
        width: 70vw;
        height: 70vw;
        max-width: 70vh;
        max-height: 70vh;
        border: solid 2.8vw var(--color-primary);
        position: relative;
        overflow: hidden;
        border-radius: 50%;
        box-sizing: border-box;
        box-shadow: 0 1.4vw 2.8vw var(--color2);
        zoom:0.2
    }

    .memory {
        position: absolute;
        top: 50%;
        left: 50%;
        transform-origin: center;
    }

    .memory:nth-child(1) {
        background-color: var(--color-primary);
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(0deg) translateY(-520%);
    }

    .memory:nth-child(2) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(6deg) translateY(-1461%);
    }

    .memory:nth-child(3) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(12deg) translateY(-1461%);
    }

    .memory:nth-child(4) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(18deg) translateY(-1461%);
    }

    .memory:nth-child(5) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(24deg) translateY(-1461%);
    }

    .memory:nth-child(6) {
        background-color: var(--color-primary);
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(30deg) translateY(-520%);
    }

    .memory:nth-child(7) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(36deg) translateY(-1461%);
    }

    .memory:nth-child(8) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(42deg) translateY(-1461%);
    }

    .memory:nth-child(9) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(48deg) translateY(-1461%);
    }

    .memory:nth-child(10) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(54deg) translateY(-1461%);
    }

    .memory:nth-child(11) {
        background-color: var(--color-primary);
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(60deg) translateY(-520%);
    }

    .memory:nth-child(12) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(66deg) translateY(-1461%);
    }

    .memory:nth-child(13) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(72deg) translateY(-1461%);
    }

    .memory:nth-child(14) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(78deg) translateY(-1461%);
    }

    .memory:nth-child(15) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(84deg) translateY(-1461%);
    }

    .memory:nth-child(16) {
        background-color: var(--color-primary);
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(90deg) translateY(-520%);
    }

    .memory:nth-child(17) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(96deg) translateY(-1461%);
    }

    .memory:nth-child(18) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(102deg) translateY(-1461%);
    }

    .memory:nth-child(19) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(108deg) translateY(-1461%);
    }

    .memory:nth-child(20) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(114deg) translateY(-1461%);
    }

    .memory:nth-child(21) {
        background-color: var(--color-primary);
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(120deg) translateY(-520%);
    }

    .memory:nth-child(22) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(126deg) translateY(-1461%);
    }

    .memory:nth-child(23) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(132deg) translateY(-1461%);
    }

    .memory:nth-child(24) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(138deg) translateY(-1461%);
    }

    .memory:nth-child(25) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(144deg) translateY(-1461%);
    }

    .memory:nth-child(26) {
        background-color: var(--color-primary);
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(150deg) translateY(-520%);
    }

    .memory:nth-child(27) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(156deg) translateY(-1461%);
    }

    .memory:nth-child(28) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(162deg) translateY(-1461%);
    }

    .memory:nth-child(29) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(168deg) translateY(-1461%);
    }

    .memory:nth-child(30) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(174deg) translateY(-1461%);
    }

    .memory:nth-child(31) {
        background-color: var(--color-primary);
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(180deg) translateY(-520%);
    }

    .memory:nth-child(32) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(186deg) translateY(-1461%);
    }

    .memory:nth-child(33) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(192deg) translateY(-1461%);
    }

    .memory:nth-child(34) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(198deg) translateY(-1461%);
    }

    .memory:nth-child(35) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(204deg) translateY(-1461%);
    }

    .memory:nth-child(36) {
        background-color: var(--color-primary);
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(210deg) translateY(-520%);
    }

    .memory:nth-child(37) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(216deg) translateY(-1461%);
    }

    .memory:nth-child(38) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(222deg) translateY(-1461%);
    }

    .memory:nth-child(39) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(228deg) translateY(-1461%);
    }

    .memory:nth-child(40) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(234deg) translateY(-1461%);
    }

    .memory:nth-child(41) {
        background-color: var(--color-primary);
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(240deg) translateY(-520%);
    }

    .memory:nth-child(42) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(246deg) translateY(-1461%);
    }

    .memory:nth-child(43) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(252deg) translateY(-1461%);
    }

    .memory:nth-child(44) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(258deg) translateY(-1461%);
    }

    .memory:nth-child(45) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(264deg) translateY(-1461%);
    }

    .memory:nth-child(46) {
        background-color: var(--color-primary);
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(270deg) translateY(-520%);
    }

    .memory:nth-child(47) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(276deg) translateY(-1461%);
    }

    .memory:nth-child(48) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(282deg) translateY(-1461%);
    }

    .memory:nth-child(49) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(288deg) translateY(-1461%);
    }

    .memory:nth-child(50) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(294deg) translateY(-1461%);
    }

    .memory:nth-child(51) {
        background-color: var(--color-primary);
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(300deg) translateY(-520%);
    }

    .memory:nth-child(52) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(306deg) translateY(-1461%);
    }

    .memory:nth-child(53) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(312deg) translateY(-1461%);
    }

    .memory:nth-child(54) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(318deg) translateY(-1461%);
    }

    .memory:nth-child(55) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(324deg) translateY(-1461%);
    }

    .memory:nth-child(56) {
        background-color: var(--color-primary);
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(330deg) translateY(-520%);
    }

    .memory:nth-child(57) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(336deg) translateY(-1461%);
    }

    .memory:nth-child(58) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(342deg) translateY(-1461%);
    }

    .memory:nth-child(59) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(348deg) translateY(-1461%);
    }

    .memory:nth-child(60) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(354deg) translateY(-1461%);
    }

    .needle {
        position: absolute;
        top: 50%;
        left: 50%;
        transform-origin: center;
    }

    .needle#hours {
        background-color: #1f1f1f;
        width: 4%;
        height: 30%;
        transform-origin: center 75%;
        transform: translate(-50%, -75%);
    }

    .needle#hours.moving {
        transition: transform 150ms ease-out;
    }

    .needle#hours:after {
        content: '';
        background-color: #1f1f1f;
        width: 4vw;
        height: 4vw;
        max-width: 4vh;
        max-height: 4vh;
        display: block;
        position: absolute;
        top: 75%;
        left: 50%;
        box-sizing: border-box;
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }

    .needle#minutes {
        background-color: #1f1f1f;
        width: 2%;
        height: 45%;
        transform-origin: center 75%;
        transform: translate(-50%, -75%);
    }

    .needle#minutes.moving {
        transition: transform 150ms ease-out;
    }

    .needle#minutes:after {
        content: '';
        background-color: #1f1f1f;
        width: 4vw;
        height: 4vw;
        max-width: 4vh;
        max-height: 4vh;
        display: block;
        position: absolute;
        top: 75%;
        left: 50%;
        box-sizing: border-box;
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }

    .needle#seconds {
        background-color: #cb2f2f;
        width: 1%;
        height: 50%;
        transform-origin: center 75%;
        transform: translate(-50%, -75%);
    }

    .needle#seconds.moving {
        transition: transform 150ms ease-out;
    }

    .needle#seconds:after {
        content: '';
        background-color: #cb2f2f;
        width: 2.5vw;
        height: 2.5vw;
        max-width: 2.5vh;
        max-height: 2.5vh;
        display: block;
        position: absolute;
        top: 75%;
        left: 50%;
        box-sizing: border-box;
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }
    .clock_logo{
        width: 10vw;
        height: 10vw;
        max-width: 10vh;
        max-height: 10vh;
        position: absolute;
        top: 50%;
        left: 50%;
        box-sizing: border-box;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .clock_logo{
            width: 10vw;
            height: 10vw;
            max-width: 10vh;
            max-height: 10vh;
            position: absolute;
            top: 50%;
            left: 50%;
            box-sizing: border-box;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            background-image: var(--clock-logo);
            background-size: 100% 100%;
            background-repeat: no-repeat;
    }
    @media (min-width: 100vh) {
        .clock {
            border: solid 2.8vh var(--color-primary);
            box-shadow: 0 1.4vh 2.8vh var(--color2);
        }
    }

</style>





            </div>
        
            <div class="nexmoe-pd-item">
                <div class="qweather" >
    <div id="he-plugin-standard">
        <iframe allowtransparency="true" frameborder="0" width="304" height="96" scrolling="no" src="//tianqi.2345.com/plugin/widget/index.htm?s=2&z=1&t=0&v=0&d=2&bd=0&k=000000&f=ff8040&ltf=009944&htf=cc0000&q=1&e=1&a=1&c=54511&w=300&h=96&align=center"></iframe>
    </div>
    <div class="qweather-logo">

    </div>
</div>
<style>
    .qweather{
        position: relative;
        padding-right: 5px;
    }
    .qweather #he-plugin-standard {
        border: 2px solid var(--color-primary);
        box-shadow: 0 1px 0 0 var(--color-primary), 0 1px 2px 0 var(--color-primary);
        border-radius: 8px;
        width: 300px;
        overflow: hidden;
    }
    .qweather-logo{
        position: absolute;
        right: 0;
        top: -15px;
        width: 40px;
        height: 40px;
        background-image: var(--qweather-logo);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
</style>

            </div>
        
    
</div>
<style>
    .nexmoe-pd {
        left: auto;
        top: 40px;
        right: 0;
    }
    .nexmoe-pd-item{
       display: flex;
        justify-content: center;
        margin-bottom: 30px;
    }
    #nexmoe-pendant .mdui-drawer{
        width: 305px;
    }
    @media screen and (max-width: 1600px) {
        #nexmoe-pendant {
            display: none
        }
    }
</style>
</div><div id="nexmoe-footer"><!--!--></div><div id="nexmoe-search-space"><div class="search-container"><div class="search-header"><div class="search-input-container"><input class="search-input" type="text" placeholder="搜索" onInput="sinput();"></div><a class="search-close" onclick="sclose();">×</a></div><div class="search-body"></div></div></div><div></div><!-- hexo injector body_end start -->
<script src="https://cdn.jsdelivr.net/npm/hexo-shiki-plugin@latest/lib/codeblock.js"></script>

  <script>
  const CODE_CONFIG = {
    beautify: true,
    highlightCopy: true,
    highlightLang: true,
    highlightHeightLimit: null,
    isHighlightShrink: false,
    copy: {
      success: 'Copy Success',
      error: 'Copy Error',
      noSupport: 'Browser Not Support',
    }
  };
  console.log(
    `%c hexo-shiki-plugin %c v1.0.27 %c https://github.com/nova1751/hexo-shiki-plugin`,
    "color: #fff; background: #5f5f5f",
    "color: #fff; background: #80c8f8",
    ""
  );
  </script>
  <!-- hexo injector body_end end --><script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"model":{"jsonPath":"/live2dw/assets/xiaomai.model.json"},"display":{"position":"left","width":200,"height":500},"mobile":{"show":false},"react":{"opacity":0.9},"log":false,"pluginJsPath":"lib/","pluginModelPath":"assets/","pluginRootPath":"live2dw/","tagMode":false});</script></body></html>